<template>
  <div class="Login iconfont">
    <span class="cross" @click="close">&#xebab;</span>
    <div class="scanCode"><img src="../../assets/scanCode.png" alt="" /></div>
    <div class="phoneImg"><img src="../../assets/login.png" alt="" /></div>
    <form>
      <div>
        <span>&#xe505;</span>
        <input
          type="number"
          placeholder="请输入手机号"
          v-model.number="data.phone"
        />
      </div>
      <div>
        <span>&#xe9d4;</span>
        <input
          type="password"
          placeholder="请输入密码"
          v-model="data.password"
        />
      </div>
      <div><input type="checkbox" />自动登录</div>
    </form>
    <button type="button" @click="login">登录</button>
    <div class="register"><router-link to="">注册</router-link></div>
    <ul class="flex justify-between">
      <li>&#xf0106;</li>
      <li>&#xe882;</li>
      <li>&#xe65a;</li>
      <li>&#xe647;</li>
    </ul>
    <div class="agreement flex">
      <div><input type="checkbox" />同意</div>
      <p>
        <router-link to="">《服务条款》</router-link>
        <router-link to="">《隐私政策》</router-link>
        <router-link to="">《儿童隐私政策》</router-link>
      </p>
    </div>
  </div>
</template>

<script>
import { methods } from "./methods.js";
export default {
  name: "Login",
  data() {
    return {
      data: { phone: "", password: "" },
    };
  },
  methods,
};
</script>

<style lang="scss" scoped>
@import "../login/login.scss";
</style>